<template>
  <div id="swiperTop">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="imageData in swiperImages.images" :key="imageData">
        <img :src="imageData.pic"/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {getBanner} from "@/request/api/home.js";

const swiperImages = reactive({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ]
});

onMounted(async () => {
  const res = await getBanner()
  swiperImages.images = res.data.banners
})
</script>

<style lang="scss" scoped>
#swiperTop {
  .van-swipe {
    width: 100%;
    height: 3rem;

    .van-swipe-item {
      padding: 0 0.2rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }

    :deep(.van-swipe__indicator--active) {
      background-color: rgb(219, 130, 130);
    }
  }
}
</style>